<script setup lang="ts">
import { fetchChatByGet } from "@/apis";
import { ref, Ref } from "vue";

const questionRef: Ref<string> = ref("");
const responseRef: Ref<string> = ref("");
const loading = ref(false);

const chatFromGet = () => {
  loading.value = true;
  fetchChatByGet(questionRef.value).then((res) => {
    res.json().then((data) => {
      console.log(data.response);
      responseRef.value = data.response;
      loading.value = false;
    });
  });
};
</script>

<template>
  <el-container v-loading="loading">
    <el-input v-model="questionRef" placeholder="在此输入您的问题" />
    <el-button @click="chatFromGet">提问</el-button>
  </el-container>
  <h3>{{ responseRef }}</h3>
</template>

<style scoped>
.example-showcase .el-loading-mask {
  z-index: 9;
}
</style>
